<!doctype html>
<html lang="%lang%">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%sveltekit.head%
		<script>
			const darkTheme = 'dim';
			const lightTheme = 'silk';
			const preferesDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
			const theme = localStorage.getItem('theme')
				? localStorage.getItem('theme')
				: preferesDark
					? darkTheme
					: lightTheme;
			document.documentElement.setAttribute('data-theme', theme);

			window
				.matchMedia('(prefers-color-scheme: dark)')
				.addEventListener('change', ({ matches }) => {
					matches
						? document.documentElement.setAttribute('data-theme', darkTheme)
						: document.documentElement.setAttribute('data-theme', lightTheme);
				});
		</script>
	</head>

	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>
